<template>
    <div class="user-index">
        <el-row :gutter="20">
            <el-col :span="24" :md="8">
                <el-card class="emp-info" style="margin-bottom: 20px">
                    <div class="avatar text-center">
                        <img :src="employeeInfo.headImage" class="user-avatar"/>
                        <div class="user-name">{{ employeeInfo.name }}</div>
                    </div>
                    <div class="emp-info-basic">
                        <el-row>
                            <el-col :span="8" class="text-left">
                                <i role="img" class="icon-id"></i>
                                <span>A0001</span>
                            </el-col>
                            <el-col :span="8" class="text-center">
                                <i role="img" class="el-icon-s-custom"></i>
                                <span>交互专家</span>
                            </el-col>
                            <el-col :span="8" class="text-right">
                                <i role="img" class="icon-department"></i>
                                <span>技术部</span>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="divider"></div>
                    <employee-info/>
                </el-card>
            </el-col>
            <el-col :span="24" :md="8">
                <el-card>
                    <div slot="header" class="clearfix">
                        <div class="card-title"><i class="el-icon-chat-dot-round"></i><span class="ml-1">系统通知</span>
                        </div>
                    </div>
                    <sys-notice/>
                </el-card>

                <el-card>
                    <div slot="header" class="clearfix">
                        <span class="card-title">团队成员</span>
                    </div>
                    <div>
                        <el-row>
                            <el-col class="mt-2" :span="12" v-for="m in teamMembers" :key="m.uid">
                                <el-avatar size="small" style="vertical-align: middle" :src="m.url"></el-avatar>
                                <span class="ml-1">{{ m.name }}</span>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>

                <div class="text-center mt-3" v-if="records.btn.visible">
                    <span class="btn-check-record-w">
                        <button class="btn-check-record" @click="startCheckRecord">{{ records.btn.text }}</button>
                    </span>
                </div>
            </el-col>
            <el-col :span="24" :md="8">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span class="card-title">5月工资条</span>
                    </div>
                    <div class="card-content">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <h4 class="m-0 p-0 text-center" style="padding: 10px 0">应发明细</h4>
                                <div
                                    class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition">
                                    <table cellspacing="0" cellpadding="0" border="0" class="el-table__body w-100">
                                        <thead>
                                        <tr class="text-left">
                                            <th class="is-leaf">
                                                <div class="cell">科目</div>
                                            </th>
                                            <th class="is-leaf">
                                                <div class="cell">金额(元)</div>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr class="el-table__row" v-for="(m,i) in salary.income">
                                            <td>
                                                <div class="cell">{{ m.title }}</div>
                                            </td>
                                            <td>
                                                <div class="cell">{{ m.value }}</div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <h4 class="m-0 p-0 text-center" style="padding: 10px 0">代扣明细</h4>
                                <div
                                    class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition">
                                    <table cellspacing="0" cellpadding="0" border="0" class="el-table__body w-100">
                                        <thead>
                                        <tr class="text-left">
                                            <th class="is-leaf">
                                                <div class="cell">项目</div>
                                            </th>
                                            <th class="is-leaf">
                                                <div class="cell">金额(元)</div>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        <tr class="el-table__row" v-for="(m,i) in salary.pay">
                                            <td>
                                                <div class="cell">{{ m.title }}</div>
                                            </td>
                                            <td>
                                                <div class="cell">{{ m.value }}</div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="text-center mt-4">
                            <span>应发总计: 10000元</span>
                            <span class="ml-3">代扣总计: 2000元</span>
                            <span class="ml-3">实际应发: 8000元</span>
                        </div>
                    </div>
                </el-card>
                <el-card>
                    <div slot="header" class="clearfix">
                        <span class="card-title">打卡记录</span>
                    </div>
                    <el-calendar v-model="now.today"></el-calendar>
                    <div class="text-center">
                        <span>上班时间: 8:50</span>
                        <span class="ml-5">下班时间: 18:50</span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import EmployeeInfo from "@/components/EmployeeInfo";
import SysNotice from "@/components/SysNotice";
import {mapState} from 'vuex'
import api from "@/services/api";
import StringTool from "@/util/StringTool";

export default {
    name: "UserIndex",
    components: {SysNotice, EmployeeInfo},
    data() {
        const _now = new Date();
        return {
            now: {
                hours: _now.getHours(),
                month: StringTool.formatDate(_now, 'yyyymm'),
                today: _now,
                date: StringTool.formatDate(_now, 'dd')
            },
            records: {
                btn: {
                    visible: false,
                    text: '上班',
                    type: 'in'
                },
                all: {},
                today: {
                    in: null,
                    out: null
                }
            },

            notice: {
                loading: true,
                list: []
            },
            salary: {
                income: [
                    {title: '基本工资', value: 5000},
                    {title: '绩效工资', value: 3000},
                    {title: '职位工资', value: 2000},
                ],
                pay: [
                    {title: '养老保险', value: 5000},
                    {title: '工伤保险', value: 0},
                    {title: '失业保险', value: 2000},
                    {title: '住房公积金', value: 2000},
                    {title: '代扣个税', value: 2000},
                ]
            },
            teamMembers: [
                {uid: 1, name: '成都吴彦祖', url: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png'},
                {uid: 2, name: '张三', url: 'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png'},
                {uid: 3, name: '四川陈冠希', url: 'https://z3.ax1x.com/2021/06/06/2UUIz9.jpg'},
                {uid: 4, name: '外面全是成龙', url: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png'},
            ]
        }
    },
    computed: {
        ...mapState(['employeeInfo'])
    },
    mounted() {
        this.loadRecords()
    },
    methods: {
        loadUserDetailInfo() {

        },
        loadRecords() {
            api.get('/emp/record-month', {month: this.now.month}).then(records => {
                this.records.all = records;
                this.processRecords();
            }).catch(err => this.$message.error(err.message))
        },
        startCheckRecord() {
            api.get('/emp/check-record',{type:this.records.btn.type}).then((ret) => {
                this.$message.info('签到成功');
                this.loadRecords();
            }).catch(err => this.$alert(err.message, '签到失败'));
        },
        processRecords() {
            const records = {};
            this.records.all.forEach(r => {
                let {action,recordDate} = r;
                if(!records[recordDate]){ records[recordDate] = {};}
                records[recordDate][r['action']] = r;

                // if (r['recordDate'] == this.now.date) {
                //     if (r['action'] == 'in') {
                //         this.records.today.in = r;
                //     } else {
                //         this.records.today.out = r;
                //     }
                // }
            })
            let today = this.now.date;
            if(records[today]){
                ['in','out'].forEach(key=>{
                    if(records[today][key]){
                        this.records.today[key] = records[today][key];
                    }
                })
            }
            this.records.all = records;
            this.records.btn.visible = false;
            if (this.now.hours < 12) {
                if (!this.records.today.in) {
                    this.records.btn.visible = true;
                    this.records.btn.text = '上班';
                    this.records.btn.type = 'in';
                }
            } else {
                if (!this.records.today.out) {
                    this.records.btn.visible = true;
                    this.records.btn.text = '下班';
                    this.records.btn.type = 'out';
                }
            }
        }
    }
}
</script>

<style scoped lang="less">

@btn_size: 160px;
@keyframes bowen {
    0% {
        box-shadow: 0 0 2px #1890FF;
    }

    100% {
        box-shadow: 0 0 30px #1890FF;
    }
}

.btn-check-record {
    width: @btn_size;
    height: @btn_size;
    border-radius: 50%;
    border: solid 4px #fafafa;
    color: #fff;
    font-size: 36px;
    background-color: #1890FF;
    box-shadow: 0 0 2px #1890FF;
    transition: all 0.2s;
    cursor: pointer;

    &:hover {
        box-shadow: 0 0 5px #1890FF;
    }

    &:active {
        box-shadow: 0 0 0px #1890FF;
    }
}

.divider {
    border-top: dashed 1px #dcdfe6;
    margin: 24px 0;
}

.sys-notices {
}

.emp-info {
    padding: 0 5px;
}

.emp-info-basic {
    margin: 20px 0;
    color: #666;

    i {
        margin-right: 5px;
    }
}

.user-name {
    margin-bottom: 4px;
    color: rgba(0, 0, 0, .85);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
}

.user-avatar {
    width: 104px;
    height: 104px;
    margin-bottom: 20px;
}

.card-title {
    font-size: 16px;
    font-weight: bold;
}

.card-content {
    .title {
        padding: 0;
        margin: 0;
    }
}

.el-table td, .el-table th {
    padding: 5px 0;
}
</style>
